making a good stylesheet

yeah, ive made a lot of bad websites. i mostly try to be as readable, elegant, and unintrusive to the reader as i can, rather than showing off. im trying to focus on some requirements this time around:

Table of Contents


it needs to be printable

when the user wants to print this page to paper, i strip the navigation and footer links:

@media print {
  nav, .status { display: none }
  pre          { overflow: visible; }
}

not much more needs to be done in this regard, since the site doesn't have a lot going on in the first place.


its meant to be downloaded

you can download any page on this site with a tool like wget. each page has a bit of inline css:

body,
.string,
.comment  {font-family: "Iosevka"}
code, pre {font-family: "IBM Plex Mono"}

body     { max-width: 50em; margin: auto; }
hr       { border: 2px solid #EEEEEE; }
html     { padding: 3%; }
pre      { overflow: auto; }
a:hover  { color: #338800; }

pre      { border-left: 3px solid #000000;
           padding-left: 20px; }

i try to keep this style small, so that it doesn't take up disk space. the whole site is also available in txt format (tarball).


tty friendly

this website is very clean on less featureful clients like lynx and eww. there's not much more to say about it :3


auto dark/light themes

in my style.css file, i link to dark.css if the user's machine has a light-mode preference:

/* load theme based on system preference */

@import url("/dark.css")  (prefers-color-scheme: dark);
@import url("/light.css") (prefers-color-scheme: light);

i use variables to store color names, to make creating new color themes easy. for example, light.css looks like this:

/* light.css
 * dark.css looks just like this with
 * different colors. */

:root {
    --bg:       #FFFFFF;
    --fg:       #222222;
    --bg-dim:   #DDDDDD;      
    --fg-dim:   #888888;
    --bold:     #000000;
    --h1:       #222222;
    --link:     #0000BB;
    --link-hov: #448800;
}

if the user doesn't set a preference, the default inline stylesheet is cute enough :3!


color variables

the rest of style.css just uses these color variables and applies them throuought the site:

body {
 background: var(--bg);
 color:      var(--text);
}

pre {
 background:    var(--bg);
 color:         var(--bold);
}

/* ... */

and so far, that's what i consider to be a good css stylesheet. i'll improve this article in the future, too <3

modified: 2024-05-06 // curl me~